@charset "utf-8";
.box1 {
    background-color: #D40E12;
    width: 500px;
    height: 500px;
}
.box1 .item1 {
    width: 300px;
    height: 100px;
    background-color: #2EDD9F;
}
.box1 .item2 {
    width: 300px;
    height: 100px;
    background-color: #DCC91B;
}
.box1 .item3 {
    width: 300px;
    background-color: #236453;
    height: 100px;
}
.box2 {
    width: 500px;
    height: 500px;
    background-color: #F3191D;
}
.box2 .item1 {
    background-color: #15D07C;
    width: 300px;
    height: 100px;
}
.box2 .item2 {
    background-color: #4513C0;
    width: 350px;
    height: 150px;
}
.box2 .item3 {
    width: 400px;
    height: 200px;
    background-color: #964D4E;
}
.box3 {
}
.box3 .item1 {
}
.box3 .item2 {
}
.box3 .item3 {
}
.box4 {
    width: 500px;
    height: 500px;
    background-color: #BF3D3F;
    text-align: left;
}
.box4 .item1 {
    width: 33.3%;
    background-color: #3D10D5;
    height: 100px;
}
.box4 .item2 {
    width: 33.3%;
    height: 100px;
    background-color: #2FD528;
}
.box4 .item3 {
    background-color: #184F82;
    width: 33.3%;
    height: 100px;
}
